<template>
  <van-nav-bar class="navbar">
    <!-- 主菜单 -->
    <template #left>
    </template>
    <!-- 语言切换 -->
    <template #right>
      <van-dropdown-menu>
        <van-dropdown-item
          v-model="language"
          :options="langOptions"
        >
          <template #title>
            <van-icon :name="langItem['icon']" size="24" />
            <span class="lang-text">{{ langItem["text"] }}</span>
          </template>
          <template #default>
            <van-cell is-link center
              url="https://github.com/meow42/tenvi-avatar"
              icon="warning-o"
              :title="i18n('tips-help-us')"
              value="GitHub"
              title-style="color: #333; text-align: left;"
            />
          </template>
        </van-dropdown-item>
      </van-dropdown-menu>
    </template>
  </van-nav-bar>
</template>
 
<script>
module.exports = {
  data() {
    return {
      active: 0,
      langOptions: [
        { value: "en", text: "English(US)", icon: "img/flag-us.png", emoji: "🇺🇸" },
        { value: "cn", text: "简体中文", icon: "img/flag-cn.png", emoji: "🇨🇳" },
        { value: "hk", text: "繁體中文(港)", icon: "img/flag-hk.png", emoji: "🇭🇰" },
        { value: "kr", text: "한국어", icon: "img/flag-kr.png", emoji: "🇰🇷" },
        { value: "ja", text: "日本語", icon: "img/flag-jp.png", emoji: "🇯🇵" },
      ],
    };
  },
  computed: {
    /** 语言类型 */
    language: {
      get() {
        return this.$store.state.language;
      },
      set(value) {
        this.$store.dispatch("changeLanguage", value);
      }
    },
    /** 从下拉选项数组中，获取当前选取的对象 */
    langItem() {
      let item = {};
      for (let i = 0; i < this.langOptions.length; i++) {
        if (this.langOptions[i]["value"] == this.language) {
          item = this.langOptions[i];
          break;
        }
      }
      return item;
    },
  },
  methods: {
    /** 获取多语言文本 */
    i18n(key) {
      return this.$store.getters.i18n(key);
    },
  },
};
</script>
